<template>
	<view class="order-detail-container">
		<!-- 收货地址组件 -->
		<!-- 因为这里只是展示地址信息，并不可以点击，所以没有使用组件，组件内有一个点击选择地址的方法 -->
		<!-- <my-address></my-address> -->
		<view class="addr-container">
			<image class="setAddr" src="@/static/icons/my_function_address@3x.png"></image>
			<view class="addr-info">
				<view class="nickname-phone">
					<text class="default-addr" v-if="address.isDefault==='true'">默认</text>
					<text class="nickname">{{address.contact}}</text> <text class="phone">{{address.phone}}</text>
				</view>
				<view class="addr">
					{{address.province}}{{address.city}}{{address.area}}{{address.address}}
				</view>
			</view>
			<!-- <image src="../../static/icons/my_order_rightarrow@3x.png" class="arr-r"></image> -->
		</view>


		<!-- 商品清单 -->
		<view class="title">
			商品清单
		</view>
		<my-goods :showGoodsNum="true" :goodsList='goodsList'></my-goods>
		<!-- 查看更多 -->
		<view class="see-more" v-if="goodsList.length>=2&&!seeMoreFlag">
			<view class="show-more" @click="toSeeMore()">点击查看更多</view>
			<view class="order-info">
				订单信息
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="info">
			<view class="numbering">
				订单编号：<text class="txt">{{orderDetail.orderNumber}}</text>
			</view>
			<view class="amount">
				订单金额：<text class="txt">￥{{orderDetail.price}}</text>
			</view>
			<view class="packet">
				使用红包：<text class="txt">{{orderDetail.hb}}</text>
			</view>
			<view class="remark">
				订单备注：<text class="txt">{{orderDetail.memo?orderDetail.memo:'空'}}</text>
			</view>

			<text class="record-title">订单记录</text>
		</view>

		<view class="created-time">
			<view class="creat">
				创建时间:<text class="date">{{orderDetail.createDate}}</text>
			</view>
			<view class="cancled"  v-if="orderDetail.state=='0'">
				取消时间:<text class="date">{{orderDetail.cancelDate}}</text>
			</view>
		</view>

		<view class="pay-status">
			<view class="cancled" v-if="orderDetail.state=='0'">已取消</view>
			<view class="wait"  v-if="orderDetail.state=='1'">待支付</view>
			<view class="wait-diliver" v-if="orderDetail.state=='2'">待发货</view>
			<view class="wait-diliver" v-if="orderDetail.state=='3'">待收货</view>
			<view class="done"  v-if="orderDetail.state=='4'">已完成</view>
			<view class="refunding"  v-if="orderDetail.state=='5'">退款中</view>
			<view class="refunded"  v-if="orderDetail.state=='6'">退款成功</view>
			<view class="refund-fail"  v-if="orderDetail.state=='7'">退款失败</view>
			<view class="pay-btn">
				<text class="cancle" v-if="orderDetail.state=='1'" @click="cancleOrder(orderDetail)">取消</text>
				<text class="pay"  v-if="orderDetail.state=='1'" @click="topay(orderDetail)">支付</text>
				<text class="express" v-if="orderDetail.state=='3'" @click="checkExpress(orderDetail)">查看物流</text>
				<text class="sales-return" v-if="orderDetail.state=='3'
"  @click="applyReturn">退货</text>
				<text class="confirm-receipt" v-if="orderDetail.state=='3'" @click="confirm(orderDetail)">确认收货</text>
				<text class="return-express" @click="expressDetail(orderDetail)" v-if="orderDetail.state=='5'" >退货物流</text>
				<text class="return-detail" @click="refundDetail(orderDetail)" v-if="orderDetail.state=='5'" >退货详情</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				orderDetail: {},
				address: {}, // 地址详情
				goodsList: [], // 商品列表
				goodsAry:[], // 暂存所有商品数据
				seeMoreFlag:false, // 默认查看更多按钮显示
				addreStr:''
			};
		},
		onLoad(option) {
			console.log(JSON.parse(option.info))
			this.orderDetail = JSON.parse(option.info)
			this.address.province = this.orderDetail.province
			this.address.city = this.orderDetail.city
			this.address.area = this.orderDetail.area
			this.address.address = this.orderDetail.address
			this.address.contact = this.orderDetail.contact
			this.address.phone = this.orderDetail.phone
			// this.goodsList = this.orderDetail.itemList
			this.goodsAry=this.orderDetail.itemList
			if(this.orderDetail.itemList.length>2){
				this.goodsList=this.goodsAry.slice(0,2)
			}else{
				this.goodsList=this.goodsAry
			}
			
			this.addreStr=this.orderDetail.province+this.orderDetail.city+this.orderDetail.area+this.orderDetail.address
			
			
			this.updateAddress(this.address)
		},
		methods: {
			...mapMutations('m_user', ['updateAddress']),
			// 显示更多列表数据：给my-goods传参数
			toSeeMore() {
				console.log('查看更多')
				let restData=this.goodsAry.slice(2)
				this.goodsList.push(...restData)
				this.seeMoreFlag=true
			},
			
			// 确认收货
			async confirm(item){
				const {
					data: res
				} = await uni.$http.post('/order/confirmOrder', {
					"userId": this.userInfo._id,
					"orderId": item._id,
				})
				console.log(res)
				if (res.success == '0') {
					uni.$showMsg('已确认收货!')
					uni.navigateBack({
						delta:0
					})
					
					return
				}
				
			},
			// 支付
			topay(){
				console.log(this.orderDetail)
				uni.navigateTo({
					url: '/subpkg/cashier-desk/cashier-desk?orderNum=' + this.orderDetail._id+'&totalPrice='+this.orderDetail.orderPrice
				})
			},
			// 查看物流
			checkExpress(detail){
				console.log(detail)
				uni.navigateTo({
					url: '/subpkg/express-detail/express-detail?addr='+this.addreStr+'&expNum='+detail.deliverNumber
				})
			},
			
			// 申请退货
			applyReturn(){
				uni.navigateTo({
					url:'/subpkg/apply-return/apply-return?info='+JSON.stringify(this.orderDetail)
				})
			},
			
			// 待支付状态的订单，取消订单
			async cancleOrder(){
				const {
					data: res
				} = await uni.$http.post('/order/cancelOrder', {
					userId: this.userInfo._id,
					orderId: this.orderDetail._id,
				})
				console.log(res)
				if (res.msg == '成功') {
					uni.$showMsg('订单取消成功！')
				}
			},
			
			// 查看物流详情
			expressDetail() {
				console.log('查看物流')
				uni.navigateTo({
					url: '/subpkg/express-detail/express-detail?orderDetail='+JSON.stringify(this.orderDetail)
				})
			},
			// 查看退货详情 ：数据传递到下个退货详情页面
			refundDetail() {
				uni.navigateTo({
					url: '/subpkg/return-detail/return-detail?info='+JSON.stringify(this.orderDetail)
				})
			}
		},
		computed: {
			...mapState('m_user', ['userInfo']),
		}
	}
</script>

<style lang="scss">
	.order-detail-container {
		padding-bottom: 100rpx;
	}

	.arr-r {
		width: 15rpx;
		height: 28rpx;
		position: absolute;
		right: 25rpx;
	}

	.setAddr {
		width: 32rpx;
		height: 44rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.addr-container {
		height: 117rpx;
		line-height: 117rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		border-top: 1rpx solid #DCDCDC;
		border-bottom: 1rpx solid #E8E8E8;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	// 收货信息
	.addr-info {

		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 50rpx;

		.phone {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-left: 18rpx;
		}

		.addr {
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			width: 520rpx;
			height: 40rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.title {
		height: 94rpx;
		line-height: 94rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid #E8E8E8;
		padding-left: 25rpx;
	}

	.see-more {
		height: 157rpx;
		border-bottom: 1rpx solid #E8E8E8;

		.show-more {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			text-align: center;
			font-weight: bold;
			color: #13CF8F;
		}

		.order-info {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding-left: 20rpx;
		}
	}

	.info {
		height: 400rpx;
		border-bottom: 1rpx solid #E8E8E8;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		position: relative;

		.numbering,
		.amount,
		.packet,
		.remark {
			height: 65rpx;
			line-height: 65rpx;

			.txt {
				font-size: 28rpx;
				font-weight: 400;
				color: #898989;
				margin-left: 38rpx;
			}
		}

		.record-title {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			position: absolute;
			bottom: 0;
		}
	}

	.created-time {
		padding-left: 20rpx;
		line-height: 80rpx;
		// border-bottom: 1rpx solid #E8E8E8;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;

		.date {
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #898989;
			margin-left: 40rpx;
		}
	}

	.pay-status {
		height: 98rpx;
		line-height: 98rpx;
		box-shadow: 0px -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.03);
		padding: 0 25rpx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 10rpx;

		.cancled,
		.refund-fail {
			font-size: 28rpx;
			font-weight: bold;
			color: #999999;
		}

		.wait,
		.wait-diliver,
		.cancled,
		.done,
		.refunding,
		.refunded,
		.refund-fail {
			flex: 1;
		}

		.pay-btn {
			flex: 2;
		}

		.wait,
		.wait-diliver,
		.done {
			font-size: 28rpx;
			font-weight: bold;
			color: #D80E0E;
		}

		.refunding,
		.refunded {
			font-size: 28rpx;
			font-weight: bold;
			color: #666666;
		}

		.pay-btn {
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.cancle,
			.pay,
			.express,
			.return-detail,
			.return-express,
			.confirm-receipt {
				width: 138rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				border: 1rpx solid #D80E0E;
				border-radius: 8rpx;
			}

			.cancle,
			.express,
			.return-express,
			.return-detail {
				font-size: 26rpx;
				font-weight: 400;
				color: #D80E0E;
			}

			.pay,
			.confirm-receipt {
				background: #D80E0E;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.sales-return {
				text-align: center;
				width: 138rpx;
				height: 68rpx;
				line-height: 68rpx;
				border: 1rpx solid #999999;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>
